<template>
  <div class="ditu" id="myEcharts"></div>
</template>

<script>
/**
 * 杭州地图+图标定位
 */
import * as echarts from 'echarts';
import imgUrl2 from "@/assets/images/jichaokxxianshang.png";
import imgUrl from '@/assets/images/dpxiaofang-jichaoblue.png'
import hangzhou from '../../../public/static/zhejiang/hangzhou.json'
export default {
  data(){
    return {
      mapChart: null, //地图对象
    }
  },
  mounted() {
    this.mineMap()
  },
  methods:{
    convertData(data) {
      var geoCoordMap = {
        // "富阳区": [119.57, 30.03],
        // "拱墅区": [120.13, 30.32],
        // "滨江区": [120.165853, 30.166131],
        // "淳安县": [119.041864, 29.608772],
        // "钱塘区": [120.481169, 30.326989],
        // "临安区": [119.461, 30.3355],
        "上城区": [120.177439, 30.246404],
        // "桐庐县": [119.691434, 29.793535],
        // "西湖区": [120.09, 30.21],
        "临平区": [120.288225, 30.409811],
        "萧山区": [120.248998, 30.045460],
        "余杭区": [119.912113, 30.265248],
        // "建德市": [119.281164, 29.474871],
      }
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            // name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
    mineMap() {
      if(process.env.VUE_APP_VERSION==5){
        // rgba(4,59,150,0.7)rgba(0,32,86,0.7)
        var colorList = {areaColor: "#002056",borderColor: "rgba(103, 192, 242, 1)",hover:'rgba(4,59,150,0.7)',bgcolor:'rgba(0,32,86,0.9)',shadowColor:'#182f68'}
        var data = [
          { departId: "330111", name: "富阳区", value: 15,icon: "", },
          { departId: "330105", name: "拱墅区", value: 1,icon: "", },
          { departId: "330108", name: "滨江区", value: 2,icon: "", },
          { departId: "330127", name: "淳安县", value: 4,icon: "", },
          { departId: "330182", name: "建德市", value: 1,icon: "", },
          { departId: "330104", name: "钱塘区", value: 8,icon: "", },
          { departId: "330112", name: "临安区", value: 9,icon: "", },
          { departId: "330102", name: "上城区", value: 1,icon:`image://${imgUrl}` },
          { departId: "330122", name: "桐庐县", value: 2,icon: "", },
          { departId: "330106", name: "西湖区", value: 1,icon: "", },
          { departId: "330113", name: "临平区", value: 5,icon:`image://${imgUrl}` },
          { departId: "330109", name: "萧山区", value: 2,icon:`image://${imgUrl}` },
          { departId: "330110", name: "余杭区", value: 1,icon:`image://${imgUrl}` },
        ];
      }else{// if(process.env.VUE_APP_VERSION==4)
        var colorList = {areaColor: "#031525",borderColor:'rgba(0,225,185,1)',hover:"#2B91B7",bgcolor:'rgba(0, 137, 119, 0.8)',shadowColor:'rgba(0,37,73,0.5)'}
        var data = [
          { departId: "330111", name: "富阳区", value: 15,icon: "", },
          { departId: "330105", name: "拱墅区", value: 1,icon: "", },
          { departId: "330108", name: "滨江区", value: 2,icon: "", },
          { departId: "330127", name: "淳安县", value: 4,icon: "", },
          { departId: "330182", name: "建德市", value: 1,icon: "", },
          { departId: "330104", name: "钱塘区", value: 8,icon: "", },
          { departId: "330112", name: "临安区", value: 9,icon: "", },
          { departId: "330102", name: "上城区", value: 1,icon:`image://${imgUrl2}` },
          { departId: "330122", name: "桐庐县", value: 2,icon: "", },
          { departId: "330106", name: "西湖区", value: 1,icon: "", },
          { departId: "330113", name: "临平区", value: 5,icon:`image://${imgUrl2}` },
          { departId: "330109", name: "萧山区", value: 2,icon:`image://${imgUrl2}` },
          { departId: "330110", name: "余杭区", value: 1,icon:`image://${imgUrl2}` },
        ];
      }
      
      var mapChart = echarts.init(document.getElementById("myEcharts"));
      echarts.registerMap('jiangxi', hangzhou);
      
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (typeof params.value[2] == "undefined") {
              return params.name + " : " + params.value;
            } else {
              return params.name + " : " + params.value[2];
            }
          },
        },
        legend: {
          orient: "vertical",
          y: "bottom",
          x: "right",
          icon: 'circle',
          // 设置图例标记的大小
          itemWidth: 10, // 宽度
          itemHeight: 10, // 高度
          data: ["行政区划"],
          textStyle: {
            color: "#fff",
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: [colorList.bgcolor], // 黑紫黑
          },
        },
        geo: {
          show: true,
          map: "jiangxi",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 10,
                fontFamily: "Arial",
              },
            },
            emphasis: {
              show: false,
              areaColor:'rgba(72,141,255,1)'
            },
          },
          select:{
            itemStyle:{
              areaColor:'rgba(72,141,255,1)'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              borderWidth: 3,//区域边框宽度
              areaColor: colorList.areaColor,
              borderColor: colorList.borderColor,
              shadowColor: colorList.shadowColor,  
              shadowOffsetX: 0,  
              shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感  
            },
            emphasis: {
              areaColor: colorList.hover,
            },
          },
        },
        series: [
          {
            name: "行政区划",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(data),
            symbol: `image://${process.env.VUE_APP_VERSION==5?imgUrl:imgUrl2}`,
            symbolSize: [40, 40],
            symbolOffset: [3, -5],
            // symbolSize: function (val) {
            //   return val[2] / 10;
            // },
            select:{
              itemStyle:{
                areaColor:'rgba(72,141,255,1)'
              }
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
                areaColor:'rgba(72,141,255,1)'
              },
            },
            itemStyle: {
              normal: {
                color: colorList.areaColor,//"#05C3F9"
              },
            },
          },
          {
            type: "map",
            map: "jiangxi",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            select:{
              itemStyle:{
                areaColor:'rgba(72,141,255,1)'
              }
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: colorList.areaColor,
                borderColor: colorList.borderColor,//"#3B5077"
              },
              emphasis: {
                areaColor: colorList.hover,
              },
            },
            animation: false,
            data: data,
          },
        ],
      };
      mapChart.setOption(option);
      window.addEventListener("resize", function () {
        mapChart.resize();
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.ditu {
  width: 100%;
  height: 100%;
}
</style>